<#assign content>
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>订单列表</h3>
            </div>
            <div class="title_right">
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            <small></small>
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30">

                        </p>
                        <table id="orderTable" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>总金额</th>
                                <th>总数</th>
                                <th>订单状态</th>
                                <th>是否退款</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tfoot>
                            <tr>
                                <th>订单号</th>
                                <th>总金额</th>
                                <th>总数</th>
                                <th>订单状态</th>
                                <th>是否退款</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</#assign>
<#include "../_inc/layout.ftl" />

<script>
    var orderTable;

    $(document).ready(function () {
        orderTable = $('#orderTable').DataTable({
            lengthChange: false,            // 是否允许用户自定义显示数量
            bPaginate: true,                // 翻页功能
            bFilter: false,                 // 列筛序功能
            ordering: false,                // 排序功能
            Info: true,                     // 页脚信息
            autoWidth: true,                // 自动宽度
            pageLength: 10,                 // 每页显示10条数据
            oLanguage: {                    // 国际语言转化
                oAria: {
                    sSortAscending: ': 以升序排列此列',
                    sSortDescending: ': 以降序排列此列'
                },
                sLengthMenu: '显示 _MENU_ 记录',
                sZeroRecords: '对不起，查询不到任何相关数据',
                sEmptyTable: '未有相关数据',
                sLoadingRecords: '正在加载数据...',
                sInfo: '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。',
                sInfoEmpty: '当前显示0到0条，共0条记录。',
                sSearch: '查询:',
                oPaginate: {
                    sFirst: '首页',
                    sPrevious: ' 上一页 ',
                    sNext: ' 下一页 ',
                    sLast: ' 尾页 '
                }
            },
            stripeClasses: ["odd", "even"],                         //为奇偶行加上样式，兼容不支持CSS伪类的场合
            paginationType: 'full_numbers',
            serverSide: true,
            ajax: function (data, callback, settings) {
                var param = {};                                     // 封装请求参数
                param.limit = data.length;                          // 页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;                           // 开始的记录序号
                param.page = (data.start / data.length) + 1;        // 当前页码
                param.action = 'page';
                $.ajax({
                    type: 'POST',
                    url: '/order_list.do',
                    cache: false,                                   //禁用缓存
                    data: param,                                    //传入组装的参数
                    dataType: 'json',
                    success: function (result) {
                        if (result['success']) {
                            // 封装返回数据
                            var returnData = {};
                            returnData.recordsTotal = result['recordsTotal'];              // 返回数据全部记录
                            returnData.recordsFiltered = result['recordsFiltered'];        // 后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result['records'];                           // 返回的数据列表
                            callback(returnData);
                        } else {
                            $.promptModal('${warning}', result['msg'], result.logout);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            },
            columns: [
                {data: 'id'},
                {
                    data: 'acprice',
                    render: function (data, type, row, meta) {
                        return priceUtil.Price.toPriceString(data * 1)
                    }
                },
                {data: 'total'},
                {
                    data: 'status',
                    render: function (data, type, row, meta) {

                        switch (data) {
                            case '0':
                                return '<span style="color: grey">初始化</span>';
                            case '1':
                                return '<span style="color: red">未付款</span>';
                            case '2':
                                return '<span style="color: skyblue">支付中</span>';
                            case '3':
                                return '<span style="color: green">支付成功</span>';
                            case '-3':
                                return '<span style="color: red">支付失败</span>';
                            case '-4':
                                return '<span style="color: yellow">订单取消</span>';
                            case '4':
                                return '<span style="color: green">订单完成</span>';
                            case '-10':
                                return '<span style="color: red">下单失败</span>';
                        }
                        return null;
                    }
                },
                {
                    data: 'refund',
                    render: function (data, type, row, meta) {
                        if (data) {
                            return '<span style="color: #00CC33">是</span>';
                        } else {
                            return '<span style="color: #be2626">否</span>';
                        }
                    }
                },
                {
                    data: 'createTime',
                    render: function (data, type, row, meta) {
                        return $.jsonDateFormat(data, 'yyyy-MM-dd hh:mm:ss');
                    }
                },
                {
                    data: 'id',
                    render: function (data, type, row, meta) {
                        var str = '';
                        str += '<button onclick="$.orderDetail(\'' + row.id + '\')" type="button" class="btn btn-info btn-xs"><i class="fa fa-plus-square"></i>订单明细</button>';
                        return str;
                    }
                }
            ],
            columnDefs: [
                {orderable: false, targets: '_all'},
                {defaultContent: '', targets: '_all'}
            ]
        });


        $.orderDetail = function (id) {
            var param = {};
            param.id = id;
            $.submitFormPost('/order_detail.do', param, 'POST');
        };
    });
</script>

